<template>
    <el-container class="all-content is-vertical">
        <!-- <el-header>Header</el-header>  -->
        <indexHeader />
        <el-container>
            <indexMenu />
            <el-container class="is-vertical">
                <el-main class="main-box">
                    <el-tabs v-model="currentTabIndex"
                             type="card"
                             @tab-remove="$tab.close">
                        <el-tab-pane v-for="item in openedTabs"
                                     :key="item.menuId"
                                     :label="item.title"
                                     :name="item.menuId"
                                     :closable="item.menuId !== homeTabMenuId">
                            <el-main class="wrap-content"
                                     :style="{height: mainHeight +'px'}">
                                <component :is="item.components[item.components.length - 1].path"
                                           v-if="item.components.length"></component>
                            </el-main>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <!-- <el-main>Main</el-main> -->
                <indexFoot />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import indexHeader from "../components/header";
import indexMenu from "../components/menu";
import indexFoot from "../components/foot";
export default {
    components: {
        indexHeader,
        indexMenu,
        indexFoot
    },
    data() {
        return {
            winHeight: document.documentElement.clientHeight
        };
    },
    computed: {
        // 当前 tab 项的 name
        currentTabIndex: {
            get: function() {
                return this.$store.getters.GetCurrentTabIndex;
            },
            set: function(newValue) {
                return newValue;
            }
        },
        // 打开的页签列表
        openedTabs() {
            return this.$store.getters.GetOpenedTabs;
        },
        // 主页 tab 的 menuId
        homeTabMenuId() {
            return this.$store.getters.GetHomeTabMenuId;
        },
        mainHeight: {
            get() {
                return  this.winHeight - 145;
            }
        }
    },
    methods: {},
    mounted() {
        var that = this;
        that.$tab.reShow();
        window.onresize = () => {
            return (() => {
                that.winHeight = document.documentElement.clientHeight;
            })();
        };
    }
};
</script>

<style  scoped>
.main-box {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: auto;
}

.el-tabs--card >>> .el-tabs__header .el-tabs__item {
    border-bottom: 1px solid #e4e7ed;
}

.height-box {
    display: block;
    height: 1500px;
    background: #f9f9f9;
}

.wrap-content {
    display: block;
    margin-top: -15px;
    overflow: auto;
}
</style>